<template>
<div class="kios" v-loading="loading">
  <div class="banner">
    <span class="money-title">Kios奖池总额</span>
    <span class="money">10,000,000 USDT</span>
    <span class="money-btn circle-btn">直接领取</span>
  </div>
  <div class="con">
    <div class="card-item-wrap">
      <div class="card-item" v-for="(item, i) in cardList">
        <img class="card-img" :src="item.imgPath" alt="">
        <span>{{item.title}}</span>
      </div>
    </div>
    <div class="con-item-wrap">
      <!-- step1 -->
      <div class="con-item">
        <span class="step-img-wrap">
          <img class="step-img" src="../../assets/images/step-circle.png" alt="">
          <img class="step-num" src="../../assets/images/1.png" alt="">
        </span>
        <span class="con-title">购买Kis</span>
        <el-input v-model="value1" clearable placeholder="请输入购买Kis的数量"></el-input>
        <span class="buy-tips">x 100 = 0</span>
        <div class="list-item-wrap">
          <p>
            <span class="dot">.</span>
            一个Kis=100USDT
          </p>
          <p>
            <span class="dot">.</span>
            请使用TRC-20的USDT进行支付
          </p>
        </div>
        <div class="edit-btn">
          <span class="circle-btn give-right">授权</span>
          <span class="circle-btn give-right buy-btn">
            购买<img src="../../assets/images/buy.png" alt="">
          </span>
        </div>
        <div class="con-item-foot">
          <span>查看规则</span>
          <span>合约地址</span>
        </div>
      </div>
      <!-- step2 -->
      <div class="con-item">
        <span class="step-img-wrap">
          <img class="step-img" src="../../assets/images/step-circle.png" alt="">
          <img class="step-num" src="../../assets/images/2.png" alt="">
        </span>
        <span class="con-title">Kis-Kit挖矿</span>
        <el-input v-model="value2" clearable placeholder="请输入Kis挖矿数量"></el-input>
        <div class="btns-box">
          <el-button>授权</el-button>
          <el-button>存入挖矿</el-button>
        </div>
        <div class="list-item-wrap">
          <p>
            <span class="dot">.</span>
            <span>Kis可用数量：</span>
            <span class="num">0</span>
          </p>
          <p>
            <span class="dot">.</span>
            <span>Kis正在挖矿数量：</span>
            <span class="num">0</span>
          </p>
          <p>
            <span class="dot">.</span>
            <span>Kit可提取数量：</span>
            <span class="num">0</span>
          </p>
        </div>
        <div class="edit-btn edit-btn-2">
          <span class="circle-btn give-right buy-btn kit-btn">
            Kit提取<img src="../../assets/images/upload.png" alt="">
          </span>
        </div>
        <div class="con-item-foot">
          <span>查看规则</span>
          <span>合约地址</span>
        </div>
      </div>
      <!-- step3 -->
      <div class="con-item">
        <span class="step-img-wrap">
          <img class="step-img" src="../../assets/images/step-circle.png" alt="">
          <img class="step-num" src="../../assets/images/3.png" alt="">
        </span>
        <span class="con-title">Kit-Kio挖矿</span>
        <el-input v-model="value3" clearable placeholder="请输入Kit挖矿数量"></el-input>
        <div class="btns-box">
          <el-button>授权</el-button>
          <el-button>存入挖矿</el-button>
        </div>
        <div class="list-item-wrap">
          <p>
            <span class="dot">.</span>
            <span>Kis可用数量：</span>
            <span class="num">0</span>
          </p>
          <p>
            <span class="dot">.</span>
            <span>Kis正在挖矿数量：</span>
            <span class="num">0</span>
          </p>
          <p>
            <span class="dot">.</span>
            <span>Kit可提取数量：</span>
            <span class="num">0</span>
          </p>
        </div>
        <div class="edit-btn">
          <span class="circle-btn give-right buy-btn kit-btn kit-btn-2">
            Kit提取<img src="../../assets/images/upload.png" alt="">
          </span>
          <span class="circle-btn give-right buy-btn kit-btn kit-btn-2">
            Kit提取<img src="../../assets/images/upload.png" alt="">
          </span>
        </div>
        <div class="con-item-foot">
          <span>查看规则</span>
          <span>合约地址</span>
        </div>
      </div>
      <!-- step4 -->
      <div class="con-item">
        <span class="step-img-wrap">
          <img class="step-img" src="../../assets/images/step-circle.png" alt="">
          <img class="step-num" src="../../assets/images/4.png" alt="">
        </span>
        <span class="con-title">Kio兑奖</span>
        <span class="usdt">
          <span class="usdt-money">100,000</span>
          <span class="unit">usdt</span>
        </span>
        <span class="usdt-tips">1个Kio可领</span>
        <div class="list-item-wrap">
          <p class="my-list-p">
            <span class="dot">.</span>
            <span>Kis可用数量：</span>
            <span class="num">0</span>
          </p>
        </div>
        <div class="edit-btn">
          <span class="circle-btn give-right">授权</span>
          <span class="circle-btn give-right buy-btn">
            购买<img src="../../assets/images/cup2.png" alt="">
          </span>
        </div>
        <div class="con-item-foot">
          <span>查看规则</span>
          <span>合约地址</span>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Kios',
  data () {
    return {
      loading: false,
      cardList: [{
          title: '返现比例高达85%',
          imgPath: require('../../assets/images/money.png')
        },
        {
          title: '一次投资永远受益',
          imgPath: require('../../assets/images/up.png')
        },
        {
          title: '最后一个投资用户可获得全部奖池',
          imgPath: require('../../assets/images/cup.png')
        }
      ],
      value1: '',
      value2: '',
      value3: ''
    }
  },
  mounted () {
    // this.load()
  },
  methods: {
    load () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1500)
    }
  }
}
</script>

<style lang="less">
.kios {
  height: 100%;

  .my-list-p {
    position: relative;
    top: -24px;
  }

  .usdt {
    .usdt-money {
      font-size: 24px;
      color: #f9305b;
    }

    .unit {
      font-size: 18px;
      color: #f9305b;
      padding-left: 3px;
    }
  }

  .usdt-tips {
    color: #6439f3;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 63px;
  }

  .buy-tips {
    padding: 20px 0;
    font-weight: 700;
    font-size: 20px;
    padding-bottom: 30px;
  }

  .list-item-wrap {
    padding: 20px 0;
    width: 100%;

    p {
      line-height: 24px;
      font-size: 12px;
      color: #999;
      position: relative;
      padding-left: 15px;
      display: flex;
      justify-content: space-between;
    }

    .dot {
      position: absolute;
      font-size: 40px;
      left: 0;
      top: -8px;
      color: red;
    }

    .num {
      color: #6439f3;
    }
  }

  .con-item-foot {
    width: 100%;
    display: flex;
    justify-content: space-around;

    span {
      cursor: pointer;
      color: #999;
      font-size: 12px;
      padding: 10px 0;
    }
  }

  .btns-box {
    display: flex;
    padding: 10px 0;

    .el-button {
      width: 100px;
    }
  }

  .edit-btn {
    font-size: 12px;
    display: flex;
    padding: 20px 0;
    justify-content: space-between;
    width: 100%;
  }

  .edit-btn-2 {
    justify-content: center;
  }

  .give-right {
    background: #6439f3;
    font-size: 14px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
  }

  .buy-btn {
    background: #fcba46;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    img {
      width: 24px !important;
      background: #ff9000;
      border-radius: 50%;
      overflow: hidden;
      padding: 5px;
      position: relative;
      right: -20px;
    }
  }

  .kit-btn {
    background: #6439f3;
    width: 150px;
    font-size: 12px;

    img {
      background: #2c00c0;
      right: -37px;
    }
  }

  .kit-btn-2 {
    width: 100px;

    img {
      right: -15px;
    }
  }

  .con-title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .step-img-wrap {
    width: 45px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .step-img {
      position: absolute;
      width: 45px;
      height: 45px;
    }

    .step-num {
      position: absolute;
      width: 16px;
      height: 20px;
    }

  }

  .circle-btn {
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border-radius: 30px;
  }

  .banner {
    height: 300px;
    background-image: linear-gradient(90deg, #6339f3 0%, #9c52ff 100%), linear-gradient(#fbfafa, #fbfafa);
    background-blend-mode: normal, normal;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #fff;

    .money-title {
      margin-top: 40px;
      margin-bottom: 10px;
    }

    .money {
      margin-bottom: 10px;
      font-size: 48px;
      color: #ffce01;
    }

    .money-btn {
      width: 200px;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      background: #fcba46;
    }
  }

  .con {
    padding: 0 10%;

    .card-item-wrap {
      position: relative;
      top: -50px;
      display: flex;
      justify-content: center;

      .card-img {
        background: #6439f3;
        border-radius: 4px;
        overflow: hidden;
        width: 55px;
        height: 55px;
        padding: 10px;
      }

      .card-item {
        margin: 0 5px;
        background: #fff;
        width: 310px;
        height: 200px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        border-bottom: 4px solid #6439f3;
        padding: 40px 0;
      }
    }

    .con-item-wrap {
      display: flex;
      justify-content: center;
      padding-bottom: 55px;

      .con-item {
        margin: 0 5px;
        height: 452px;
        padding: 20px;
        width: 250px;
        background-color: #ffffff;
        box-shadow: 0px 5px 30px 0px rgba(51, 51, 51, 0.1);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
</style>
